Style

The Style object contains a collection of specific style settings that can be used to customize the UI of the hub, The settings are injected into the HubEmbedOptions object before being used in the hub method.

The style object is in effect a simple JavaScript array with specific items (enumerated below). The settings tightly follow the same settings as classic CSS.

The Style object is NOT the same as the AppStyles object used to format standalone Discover and Present content.

At the moment, the AppStyles cannot be used within an embedded Hub instance.

Styling Groups

  • The "tab" styles affect the the hub's tab section at the top of the UI
  • The "buttons" affect the small function buttons in the top right of the hubs UI
  • The "tiles' affect the tiled content contained within a given hub tab
  • The "picker" affects the pop-up widget picker for content and functionality that allows users to build their hub space.
  • The "container" is the broad, background canvas of the hub itself

Nested Structure

The following code snippet shows the ENTIRE Style structure with every property that can be set.

		
{
  "tabs": {
    "nonSelectedTab": {
      "color": "",
      "backgroundColor": "",
      "fontSize": ,
      "fontWeight": 
    },
    "selectedTab": {
      "color": "",
      "backgroundColor": "",
      "fontSize": ,
      "fontWeight": 
    },
    "border": "",
    "backgroundColor": "",
    "addTabIconColor": "",
    "deleteTabIconColor": ""
  },
  "buttons": {
    "color": "",
    "secondaryColor": "",
    "hoverColor": ""
  },
  "tiles": {
    "backgroundColor": "",
    "titleColor": "",
    "boxShadow": "",
    "addWidgetPrimaryColor": "",
    "addWidgetSecondaryColor": ""
  },
  "picker": {
    "backgroundColor": "",
    "tabs": {
      "nonSelectedTab": {
        "backgroundColor": "",
        "fontSize": ,
        "fontWeight": 
      },
      "selectedTab": {
        "backgroundColor": "",
        "fontSize": ,
        "fontWeight": 
      },
      "border": "",
      "backgroundColor": "",
      "addTabIconColor": "",
      "deleteTabIconColor": "",
      "iconColor": ""
    }
  },
  "container": {
    "border": ""
  },
  "canvas": {
    "backgroundColor": ""
  }
}

Flat vs Hierarchical

You can provide the object syntax hierarchically (as shown above), or flattened (see example below). When providing the flattened object, be sure to encase the keys in quotes.

Examples

ClosedFlattened Structure

The following instantiates the style object in flattened mode, and then uses in the hub method to instantiate the hub on a hosting page with the custom choices. 


const container = document.getElementById('embed-container');

	const customStyles = {
		'tabs.nonSelectedTab.color': 'black',
		'tabs.nonSelectedTab.backgroundColor': '#e1e1e1',
		'tabs.nonSelectedTab.fontSize': 12,
		'tabs.nonSelectedTab.fontWeight': 500,
		'tabs.selectedTab.color': '#498c5b',
		'tabs.selectedTab.backgroundColor': '#ffffff',
		'tabs.selectedTab.fontSize': 12,
		'tabs.selectedTab.fontWeight': 500,
		'tabs.border': '1px solid #e1e1e1',
		'tabs.backgroundColor': '#e1e1e1',
		'tabs.addTabIconColor': '#d2d6d9',
		'tabs.deleteTabIconColor': 'gray',
		'tabs.iconColor': '#8599A8',
		'buttons.color': 'gray',
		'buttons.secondaryColor': '#006699',
		'buttons.hoverColor': '#003366',
		'tiles.backgroundColor': '#ffffff',
		'tiles.titleColor': '#353d42',
		'tiles.boxShadow': '1px 1px 1px 1px rgba(0, 0, 0, 0.19)',
		'tiles.addWidgetPrimaryColor': '#8599A8',
		'tiles.addWidgetSecondaryColor': '#328EC1',
		'picker.backgroundColor': '#ffffff',
		'picker.tabs.nonSelectedTab.color': 'red',
		'picker.tabs.nonSelectedTab.backgroundColor': '#f2f2f2',
		'picker.tabs.nonSelectedTab.fontSize': 12,
		'picker.tabs.nonSelectedTab.fontWeight': 500,
		'picker.tabs.selectedTab.color': '#353d42',
		'picker.tabs.selectedTab.backgroundColor': '#f2f2f2',
		'picker.tabs.selectedTab.fontSize': 12,
		'picker.tabs.selectedTab.fontWeight': 500,
		'picker.tabs.border': '2px solid #d2d6d9',
		'picker.tabs.backgroundColor': '#f2f2f2',
		'picker.tabs.addTabIconColor': '#d2d6d9',
		'picker.tabs.deleteTabIconColor': 'gray',
		'picker.tabs.iconColor': '#8599A8',
		'container.border': '#8599A8',
		'canvas.backgroundColor': '#e1e1e1',
	};

	embedClient.hub(container, {
		theme: "light",
		editable: true,
		style: customStyles,
		showTabs: true,
		responsiveness: "compact",
		}).then(hub => {
		});
	});
ClosedHierarchical Structure

The following code snippet shows the ENTIRE Style hierarchical structure with every property that can be set.

		
{
  "tabs": {
    "nonSelectedTab": {
      "color": "#d1d1d1",
      "backgroundColor": "#3f3e3e",
      "fontSize": 12,
      "fontWeight": 400
    },
    "selectedTab": {
      "color": "#d1d1d1",
      "backgroundColor": "#535353",
      "fontSize": 12,
      "fontWeight": 500
    },
    "border": "2px solid #282828",
    "backgroundColor": "#3F3E3E",
    "addTabIconColor": "#328ec1",
    "deleteTabIconColor": "gray"
  },
  "buttons": {
    "color": "#CCCCCC",
    "secondaryColor": "#04ADED",
    "hoverColor": "#00BDFF"
  },
  "tiles": {
    "backgroundColor": "#535353",
    "titleColor": "#F1F1F1",
    "boxShadow": "1px 1px 1px 1px rgba(0, 0, 0, 0.19)",
    "addWidgetPrimaryColor": "#CCCCCC",
    "addWidgetSecondaryColor": "#04ADED"
  },
  "picker": {
    "backgroundColor": "#535353",
    "tabs": {
      "nonSelectedTab": {
        "backgroundColor": "#3f3e3e",
        "fontSize": 12,
        "fontWeight": 400
      },
      "selectedTab": {
        "backgroundColor": "#535353",
        "fontSize": 12,
        "fontWeight": 500
      },
      "border": "1px solid #282828",
      "backgroundColor": "#3F3E3E",
      "addTabIconColor": "#328ec1",
      "deleteTabIconColor": "gray",
      "iconColor": "#CCCCCC"
    }
  },
  "container": {
    "border": ""
  },
  "canvas": {
    "backgroundColor": ""
  }
}